<!--
 * @Author: your name
 * @Date: 2021-07-04 22:06:41
 * @LastEditTime: 2021-07-06 22:30:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop_mananger\src\components\users\components\uTable\uTable.vue
-->
<template>
  <div class="uTable">
    <el-table :data="userList" border style="width: 100%" stripe>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="role_name" label="角色"></el-table-column>
      <el-table-column label="状态" prop="mg_state">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="btn">
            <!-- 修改 -->
            <el-tooltip class="item" effect="dark" content="修改角色" placement="top">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip class="item" effect="dark" content="删除角色" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            </el-tooltip>
            <!-- 分配角色 -->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    props: {
      userList: {
        type: Array,
        default () {
          return []
        }
      },
      total: {
        type: Number,
        default: 0
      }
    },
    methods: {
      async userStateChange(userinfo){
       const {data:res}= await this.$http.put(`users/${userinfo.row.id}/state/${userinfo.row.mg_state}`);
       if(res.meta.status!==200){
         userinfo.mg_state=!userinfo.mg_state
         return this.$message.error("用户数据修改失败！")
       }
       this.$message.success("用户数据修改成功！")

      },
      showEditDialog(id){
        this.$bus.$emit('showEditDialog',id)
      },
      deleteUser(id){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data:res}=await this.$http.delete('users/'+id);
          if(res.meta.status !==200){
            return this.$message.error('删除用户失败');
          }
          this.$emit('resetUserEmit')
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },

  }
</script>
<style lang="scss" scoped>
  .uTable {
    margin-top: 15px;
    font-size: 12px;
  }


</style>